<!--
 * @Descripttion: 
 * @Author: jiansheng
 * @Date: 2021-12-02 16:38:26
-->
<template>
  <div>
    <p style="margin-bottom: 20px;">孙子组件：{{fooString}} -- {{ fooObj }} -- {{ fooObj.foo }}</p>
    <p class="btn" @click="changeString">点击更改 fooString</p>
    <p class="btn" @click="changeObj">点击更改 fooObj.foo</p>
  </div>
</template>
<script>
export default {
  inject: ['fooString', 'fooObj'],
  data() {
    return {
      fooString: this.fooString
    }
  },
  methods: {
    changeString() {
      this.fooString = 1
    },
    changeObj() {
      this.fooObj.foo = ++this.fooObj.foo
    }
  },
}
</script>
<style lang="less" scoped>
.btn{
  border: 1px solid blue;
  &:hover{
    cursor: pointer;
    color: blue;
  }
}
</style>